<template>
	<div class="app-container">
		<el-form :inline="true" :model="dataForm" @submit.native.prevent @keyup.enter.native="getDataList()">

			<el-form-item>
        <el-input placeholder="请输入员工姓名搜索" v-model="dataForm.name" :clearable="true" size="mini">
          <template slot="prepend">员工姓名</template>
        </el-input>
      </el-form-item>

      <el-form-item>
        <el-input placeholder="请输入员工工号搜索" v-model="dataForm.username" :clearable="true" size="mini">
          <template slot="prepend">员工工号</template>
        </el-input>
      </el-form-item>

      <el-form-item>
        <el-button @click="searchData()" type="primary" class="pan-btn primary-btn" size="mini" icon="el-icon-search">搜索</el-button>
      </el-form-item>

      <el-form-item>
        <el-button v-if="isAuth('sys:user:save')" @click="addModule()" type="success" class="pan-btn success-btn" size="mini" icon="el-icon-upload">新增</el-button>
      </el-form-item>

      <el-form-item>
        <el-button v-if="isAuth('sys:user:delete')" @click="deleteData()" type="danger" class="pan-btn danger-btn" size="mini" icon="el-icon-delete">删除</el-button>
      </el-form-item>

		</el-form>

		<el-table
			:data="dataList"
			v-loading="dataListLoading"
			border
      fit
      highlight-current-row
			@selection-change="selectionChange"
	    style="width: 100%">
    <el-table-column
      type="selection"
      header-align="center"
      align="center"
      width="50">
    </el-table-column>
		<el-table-column
			prop="userId"
			header-align="center"
			align="center"
			label="员工编号">
		</el-table-column>
		<el-table-column
			prop="username"
			header-align="center"
			align="center"
			label="员工工号">
		</el-table-column>
		<el-table-column
			prop="name"
			header-align="center"
			align="center"
			label="员工姓名">
		</el-table-column>
		<el-table-column
			prop="departmentName"
			header-align="center"
			align="center"
			label="所属部门">
		</el-table-column>
		<el-table-column
			prop="inspectionGroupNames"
			header-align="center"
			align="center"
			label="所属检验组">
		</el-table-column>
		<el-table-column
			prop="positionName"
			header-align="center"
			align="center"
			label="员工职位">
		</el-table-column>
		<el-table-column
			prop="roleName"
			header-align="center"
			align="center"
			label="员工角色">
      <template slot-scope="{row}">
        {{ row.roles == null ? null : row.roles.map(r => {return r.roleName}).join('、') }}
      </template>
		</el-table-column>
		<el-table-column
			prop="status"
			header-align="center"
			align="center"
			label="账号状态">
		</el-table-column>
		<el-table-column
        fixed="right"
        header-align="center"
        align="center"
        label="操作">
        <template slot-scope="scope">
          <el-button v-if="isAuth('sys:user:update') && scope.row.userId != 1" type="text" size="small" @click="updateData(scope.row)">修改</el-button>
          <el-button v-if="isAuth('sys:user:delete') && scope.row.userId != 1" type="text" size="small" @click="deleteData(scope.row.userId)">删除</el-button>
          <el-button v-if="isAuth('sys:user:reset') && scope.row.userId != 1" type="text" style="color: red;" size="small" @click="resetData(scope.row.userId)">重置密码</el-button>
        </template>
      </el-table-column>
		</el-table>
		<el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper"
    ></el-pagination>
    <add-or-update-module
    	v-if="addModuleVisible"
    	@close="addModule"
    	@refreshData="getDataList"
    	:childDataForm="childDataForm"
    	></add-or-update-module>
	</div>
</template>

<script>
	import CommonMethod from '@/views/mixin/common'
	import AddOrUpdateModule from './employee-addorupdatemodule'
	import { CODE_OK } from '@/common/js/config'
	import { getUserList,deleteUser,resetPassword } from "@/api/user"
	export default {
    name: 'yuangong',
		mixins: [CommonMethod],
		components: {
			AddOrUpdateModule
		},
		data() {
    	return {
	      dataForm: {},
	      dataList: [],
	      pageIndex: 1,
	      pageSize: 10,
	      totalPage: 0,
	      dataListLoading: false,
	      selectionList: [],
	      addModuleVisible: false,
	      childDataForm: ""
	    }
  	},
  	mounted() {
  		if (this.isAuth('sys:user:list')){
  			this.getDataList()
  		}
  	},
  	methods: {
  		addModule() {
  			this.childDataForm = ""
  			this.addModuleVisible = !this.addModuleVisible
  		},
  		searchData() {
  			this.pageIndex=1
  			this.getDataList()
  		},
			getDataList() {
	  		this.dataListLoading = true
	  		const params = {
	  			page: this.pageIndex,
	        limit: this.pageSize,
	  			name: this.dataForm.name || null,
	  			username: this.dataForm.username || null
	  		}
	  		getUserList(params).then(res => {
	  			if(res.code === CODE_OK) {
	  				this.dataList = res.page.list
	  				for (let i=0,j=this.dataList.length; i<j; i++) {
	  					if (this.dataList[i].status == 0){
	  						this.dataList[i].status = '正常'
	  					}else{
	  						this.dataList[i].status = '冻结'
	  					}
	  				}
	  				this.totalPage = res.page.totalCount
	  			}else{
	  				this.$message.error(res.msg)
	  			}
	  			this.dataListLoading = false
	  		}).catch()
			},
			updateData(row) {
				this.childDataForm = row
				this.addModuleVisible = !this.addModuleVisible
			},
      resetData(id){
        let msg = '此操作将重置用户的登录密码, 是否继续?'
        this.$confirm(msg, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
        	resetPassword(id).then(res=>{
        		if (res.code === CODE_OK) {
        			this.$message({
        			  type: 'success',
        			  message: '密码重复成功(默认初始密码:123456)'
        			})
        		}
        	}).catch();
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消密码重复'
          })
        })
      },
			deleteData(id) {
				if (this.selectionList.length == 0 && id == undefined) {
					this.$message.error('请选择至少一条员工信息')
					return
				}
				let ids = id ? [id] : this.selectionList.filter(item => {
					return item.userId != 1
				})
				let msg = id ? '此操作将永久删除此员工信息, 是否继续?' : '此操作将永久删除选中的员工信息, 是否继续?'
				this.$confirm(msg, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
       	}).then(() => {
       		deleteUser(ids).then(res => {
       			if (res.code === CODE_OK) {
       				this.$message({
		            type: 'success',
		            message: '删除成功!'
		          })
       				this.getDataList()
       			}else{
       				this.$message.error(res.msg)
       			}
       		})
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
			},
			selectionChange(obj) {
				this.selectionList = obj
			}
  	}
	}
</script>

<style scoped>
  >>> .el-form-item__content {
    line-height: normal;
  }
</style>
